<template>
  <div class="gather-table">
    <div class="table_one">
      <vxe-table
        class="mytable-scrollbar"
        border
        stripe
        row-id="id"
        size="medium"
        resizable
        :loading="loading2"
        :data="tableOne"
        :header-cell-class-name="table_col"
        highlight-hover-row
        max-height="100%"
        :row-config="{ isCurrent: true, isHover: true }"
        @cell-click="tableRowChange"
        ref="vxeTable"
        v-if="tableOne.length > 0">
        <vxe-column
          field="leaveTypeName"
          :title="param2.type == '1' ? '请假类型' : '公务外出类型'"
          align="center"
          key="leaveTypeName"
          v-if="['1', '9'].includes(param2.type)">
          <template #default="{ row }">
            {{ row.leaveTypeName }}
          </template>
        </vxe-column>
        <vxe-column field="orgName" title="部门" align="center" v-if="showType !== '3'"></vxe-column>
        <vxe-column field="userName" title="姓名" align="center" v-if="showType !== '3'"></vxe-column>
        <vxe-column field="postName" title="职务" align="center" v-if="showType !== '3'"></vxe-column>
        <!-- <vxe-column
          field="punchTime"
          :title="param2.type == '1' ? '上班打卡时间' : '下班打卡时间'"
          align="center"
          key="punchTime"
          v-if="['1', '2'].includes(param2.type)"
        ></vxe-column> -->
        <vxe-column field="attendanceDate" title="日期" align="center" v-if="param2.type == '4'"></vxe-column>
        <!-- <vxe-column
          field="checkTypeName"
          title="考勤结果"
          align="center"
          key="checkTypeName"
          v-if="['1', '2', '4'].includes(param2.type)"
        >
          <template #default="{ row }">
            <div v-if="row.hours === '未打卡'">{{ row.hours }}</div>
            <div v-else>{{ row.checkTypeName }}{{ row.hours }}</div>
          </template>
        </vxe-column> -->
        <!-- <vxe-column
          field="attendanceStandard"
          title="考勤班次"
          align="center"
          v-if="['1', '2'].includes(param2.type)"
        ></vxe-column> -->
        <vxe-column title="打卡时间" align="center" v-if="param2.type == '4'">
          <template #default="{ row }">
            <div v-if="row.startTime || row.endTime">
              {{ row.startTime }}-
              <span v-if="row.endTime">{{ moment(row.endTime).format('HH:mm') }}</span>
            </div>
            <div v-else>—</div>
          </template>
        </vxe-column>
        <vxe-column
          field="startTime"
          :title="
            param2.type == '1'
              ? '请假开始时间'
              : param2.type == '9'
              ? '外出开始时间'
              : param2.type == '7'
              ? '调休开始时间'
              : '加班开始时间'
          "
          align="center"
          key="startTime"
          v-if="['5', '7', '1', '9'].includes(param2.type)"></vxe-column>
        <vxe-column
          field="endTime"
          :title="
            param2.type == '1'
              ? '请假结束时间'
              : param2.type == '9'
              ? '外出结束时间'
              : param2.type == '7'
              ? '调休结束时间'
              : '加班结束时间'
          "
          align="center"
          key="endTime"
          v-if="['5', '7', '1', '9'].includes(param2.type)"></vxe-column>
        <vxe-column
          field="days"
          :title="
            param2.type == '1'
              ? '请假天数(天)'
              : param2.type == '9'
              ? '外出天数(天)'
              : param2.type == '7'
              ? '调休天数(天)'
              : ''
          "
          align="center"
          key="days"
          v-if="['7', '1', '9'].includes(param2.type)">
          <template #default="{ row }">
            <div class="detail_box">
              <span>{{ row.days }}</span>
              <span class="word_tip" v-if="row.leaveType == '25'">
                <el-popover placement="bottom" width="300" trigger="hover">
                  工作日为{{ row.days }}天，每天一小时
                  <i class="el-icon-info" slot="reference"></i>
                </el-popover>
              </span>
            </div>
          </template>
        </vxe-column>
        <vxe-column
          field="hours"
          :title="
            param2.type == '1'
              ? '请假时长(h)'
              : param2.type == '9'
              ? '外出时长(h)'
              : param2.type == '7'
              ? '调休时长(h)'
              : '加班时长'
          "
          align="center"
          key="hours"
          v-if="['5', '7', '1', '9'].includes(param2.type)"></vxe-column>
        <vxe-column
          field="isLeaveCancel"
          title="是否销假"
          align="center"
          key="isLeaveCancel"
          v-if="['1'].includes(param2.type)">
          <template #default="{ row }">
            {{ row.isCanceled === '1' ? '是' : '否' }}
          </template>
        </vxe-column>
        <vxe-column title="操作" align="center" v-if="['1'].includes(param2.type) && showType === '6'" fixed="right">
          <template #default="{ row }">
            <span class="operate" @click.stop="remind(row)" v-if="row.isLeaveCancel === '0'">销假提醒</span>
            <span class="operate" @click.stop="backForm(row)" v-if="row.isLeaveCancel === '2'">退 回</span>
          </template>
        </vxe-column>
      </vxe-table>
      <div class="no_data" style="height: 100%" v-else>
        <empty></empty>
      </div>
      <el-pagination
        background
        :current-page="tablePage.currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="tablePage.pageSize"
        :total="tablePage.total"
        @current-change="handleSizeChange"
        hide-on-single-page
        layout="pager,total"></el-pagination>
    </div>
    <XnDialog
      title="考勤登记单"
      :visible.sync="inforDiaShow"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="76%"
      class="branch_dialog"
      @close="inforDiaShow = false">
      <AttendOneRight
        staticsShow="1"
        :id="activeInfo.id"
        :formId="activeInfo.formId"
        :keysItem="activeInfo"
        ref="inforDetail"
        pageFrom="dialog" />
    </XnDialog>
    <XnDialog
      title="附件上传"
      :visible.sync="annexDialogShow"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="60%"
      class="branch_dialog"
      @close="annexDialogShow = false">
      <UploadFile :file-list="enclosureList" titleAdd="附件：">
        <div class="file_tips" slot="other">
          <div class="tip_li">提示：请上传病例证明</div>
        </div>
      </UploadFile>
      <div class="sunmit_tips" slot="footer">
        <el-button type="primary" @click="close('0')" size="small" plain class="btnBorder">取消</el-button>
        <el-button type="primary" @click="close('1')" size="small" class="btnBg">确认</el-button>
      </div>
    </XnDialog>
  </div>
</template>

<script>
import {
  getOrgStatisticsDetail,
  uploadEnclosureList,
  getUserStatisticsDetail,
  returnLeaveForm,
} from '@apis/api-attendance.js'
import moment from 'moment'
import AttendOneRight from '../components/AttendOneRight.vue'
import UploadFile from '@com/UploadFile'
import XnDialog from '@com/xnDialog.vue'
moment.locale('zh-cn')
export default {
  components: { AttendOneRight, UploadFile, XnDialog },
  props: {
    showType: {
      type: String,
      default: '1',
    },
    showAll: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      param1: {},
      param2: {
        userId: '',
        orgId: '',
        type: '',
        leaveId: '',
        attendanceDate: '',
      },
      statics: {},
      tableOne: [],
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      moment: moment,
      loading2: false,
      inforDiaShow: false,
      activeInfo: {
        id: '',
        formId: '',
        processInstanceId: '',
      },
      filterList: [],
      filterStr: '',
      annexDialogShow: false,
      activeRow: {},
      enclosureList: [],
    }
  },
  created() {},
  mounted() {},
  methods: {
    getOrgLeaveStatistics(startTime, endTime, type, leaveId, orgId, userId, backType) {
      this.param1 = {
        startTime: startTime,
        endTime: endTime,
      }
      this.param2 = {
        orgId: orgId,
        userId: userId,
        type: type || '0',
        leaveId: leaveId,
        isLeaveCancel: backType,
      }
      this.tablePage.currentPage = 1
      this.getOrgTable()
    },
    // 获取部门列表
    getOrgTable() {
      this.loading = true
      const obj = Object.assign(this.param1, this.param2)
      getOrgStatisticsDetail({
        pageSize: this.tablePage.pageSize,
        currentPage: this.tablePage.currentPage,
        param: {
          ...obj,
        },
      }).then(res => {
        if (res.status === 200) {
          this.loading = false
          this.tableOne = res.data.content
          this.tablePage.total = res.data.totalSize
        }
      })
    },

    handleSizeChange(e) {
      if (e.type === 'size' && this.tablePage.pageSize !== e.pageSize) {
        this.tablePage.currentPage = 1
      }
      this.tablePage.currentPage = e.currentPage
      this.tablePage.pageSize = e.pageSize
      this.getOrgTable()
    },

    leaveOrgCli(type) {
      this.param2.type = type
      this.tablePage.currentPage = 1
      this.tableOne = []
      this.tablePage.total = 0
      this.filterStr = ''
      this.getOrgTable()
    },
    tableRowChange({ row }) {
      if (['7', '1', '9'].includes(this.param2.type)) {
        this.activeInfo = {
          id: row.dailyId,
          formId: row.formId,
          processInstanceId: row.processInstanceId,
        }
        this.inforDiaShow = true
      }
    },
    /* 头部样式 */
    table_col({ row, column, rowIndex, columnIndex }) {
      return 'table_col'
    },
    remind(row) {
      this.$emit('remind', row)
    },
    uploadAnnex(row) {
      console.log(row)
      this.enclosureList = []
      this.activeRow = row
      this.annexDialogShow = true
    },
    close(type) {
      if (type === '1') {
        if (!this.enclosureList.length) {
          return this.$message.warning('请先上传附件')
        }
        uploadEnclosureList({
          id: this.activeRow.dailyId,
          enclosureList: this.enclosureList,
        }).then(res => {
          if (res.status === 200) {
            this.$message.success('上传附件成功')
            this.$emit('initData')
            this.annexDialogShow = false
          }
        })
      } else {
        this.annexDialogShow = false
      }
    },
    getPersonLeaveStatistics(startTime, endTime, type, leaveId, orgId, userId, backType) {
      this.param1 = {
        startTime: startTime,
        endTime: endTime,
      }
      this.param2 = {
        orgId: orgId,
        userId: userId,
        type: type || '0',
        leaveId: leaveId,
        isLeaveCancel: backType,
      }
      this.tablePage.currentPage = 1
      this.getPersonTable()
    },
    // 获取部门列表
    getPersonTable() {
      this.loading = true
      const obj = Object.assign(this.param1, this.param2)
      getUserStatisticsDetail({
        pageSize: this.tablePage.pageSize,
        currentPage: this.tablePage.currentPage,
        param: {
          ...obj,
        },
      }).then(res => {
        if (res.status === 200) {
          this.loading = false
          this.tableOne = res.data.content
          this.tablePage.total = res.data.totalSize
        }
      })
    },
    backForm(row) {
      returnLeaveForm({
        id: row.dailyId,
      }).then(res => {
        if (res.status === 200) {
          this.$message.success('退回成功')
          this.$emit('initData')
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.gather-table {
  height: 100%;
  .table_one {
    padding: 0 10px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
    .page-r {
      text-align: right;
    }
    .mytable-scrollbar {
      height: calc(100% - 50px);
      /deep/.vxe-table--render-wrapper {
        height: 100%;
        .vxe-table--main-wrapper {
          height: 100%;
          display: flex;
          flex-direction: column;
          .vxe-table--body-wrapper {
            flex: 1;
          }
        }
      }
      .detail_box {
        // position: relative;
        .word_tip {
          position: absolute;
          right: 5px;
          bottom: 0;
          color: #999;
        }
      }
      .subscript {
        position: absolute;
        right: 0;
        top: 0;
        border-top: 30px solid #f54040;
        border-left: 35px solid transparent;
      }
      .subscript_word {
        position: absolute;
        right: 3.5px;
        top: -1px;
        color: #ffffff;
        font-size: 12px;
      }
    }
    .operate {
      color: #004db6;
      cursor: pointer;
    }
  }
}
/deep/.upload_box {
  align-items: center;
  .file_tips {
    margin-left: 10px;
  }
}
/deep/.sunmit_tips {
  text-align: center;
  .el-button--mini,
  .el-button--small {
    font-size: 16px;
  }
}
</style>
